Frontend Micro-Frontend: Obvladovanje arhitekture Module Federation

V današnjem hitro razvijajočem se svetu spletnega razvoja lahko gradnja in vzdrževanje obsežnih frontend aplikacij postane vse bolj zapleteno. Tradicionalne monolitne arhitekture pogosto vodijo do izzivov, kot so napihnjena koda, počasni časi gradnje in težave pri neodvisnih namestitvah. Mikro-frontendi ponujajo rešitev z razgradnjo frontenda na manjše, bolj obvladljive dele. Ta članek se poglobi v Module Federation, zmogljivo tehniko za implementacijo mikro-frontendov, ter raziskuje njene prednosti, arhitekturo in praktične strategije implementacije.

Kaj so mikro-frontendi?

Mikro-frontendi so arhitekturni slog, pri katerem je frontend aplikacija razčlenjena na manjše, neodvisne in namestljive enote. Vsak mikro-frontend je običajno v lasti ločene ekipe, kar omogoča večjo avtonomijo in hitrejše razvojne cikle. Ta pristop odraža arhitekturo mikrostoritev, ki se pogosto uporablja na backendu.

Ključne značilnosti mikro-frontendov vključujejo:

• Neodvisna namestljivost: Vsak mikro-frontend se lahko namesti neodvisno, ne da bi to vplivalo na druge dele aplikacije.
• Avtonomija ekip: Različne ekipe so lahko lastnice in razvijajo različne mikro-frontende z uporabo svojih prednostnih tehnologij in delovnih tokov.
• Tehnološka raznolikost: Mikro-frontendi so lahko zgrajeni z različnimi ogrodji in knjižnicami, kar ekipam omogoča izbiro najboljših orodij za delo.
• Izolacija: Mikro-frontendi morajo biti med seboj izolirani, da se preprečijo kaskadne napake in zagotovi stabilnost.

Zakaj uporabljati mikro-frontende?

Sprejetje mikro-frontend arhitekture ponuja več pomembnih prednosti, zlasti za velike in zapletene aplikacije:

• Izboljšana razširljivost: Razčlenitev frontenda na manjše enote olajša razširjanje aplikacije po potrebi.
• Hitrejši razvojni cikli: Neodvisne ekipe lahko delajo vzporedno, kar vodi do hitrejšega razvoja in ciklov izdaj.
• Povečana avtonomija ekip: Ekipe imajo večji nadzor nad svojo kodo in lahko sprejemajo odločitve neodvisno.
• Lažje vzdrževanje: Manjše kodne baze je lažje vzdrževati in odpravljati napake.
• Tehnološko agnostično: Ekipe lahko izberejo najboljše tehnologije za svoje specifične potrebe, kar omogoča inovacije in eksperimentiranje.
• Zmanjšano tveganje: Namestitve so manjše in pogostejše, kar zmanjšuje tveganje za obsežne napake.

Uvod v Module Federation

Module Federation je funkcionalnost, predstavljena v Webpack 5, ki omogoča JavaScript aplikacijam dinamično nalaganje kode iz drugih aplikacij med izvajanjem. To omogoča ustvarjanje resnično neodvisnih in sestavljivih mikro-frontendov. Namesto da bi vse gradili v en sam sveženj (bundle), Module Federation omogoča različnim aplikacijam, da si delijo in uporabljajo module druga druge, kot da bi bile lokalne odvisnosti.

Za razliko od tradicionalnih pristopov k mikro-frontendom, ki temeljijo na iframe-ih ali spletnih komponentah, Module Federation zagotavlja bolj brezšivno in integrirano izkušnjo za uporabnika. Izogiba se preobremenitvi zmogljivosti in zapletenosti, povezani s temi drugimi tehnikami.

Kako deluje Module Federation

Module Federation deluje na konceptu "izpostavljanja" in "uporabe" modulov. Ena aplikacija ("gostitelj" ali "vsebnik") lahko izpostavi module, medtem ko jih druge aplikacije ("oddaljene aplikacije") lahko uporabljajo. Tukaj je razčlenitev postopka:

1. Izpostavljanje modula: Mikro-frontend, konfiguriran kot "oddaljena" aplikacija v Webpacku, izpostavi določene module (komponente, funkcije, pripomočke) prek konfiguracijske datoteke. Ta konfiguracija določa module, ki se delijo, in njihove ustrezne vstopne točke.
2. Uporaba modula: Drug mikro-frontend, konfiguriran kot "gostiteljska" ali "vsebniška" aplikacija, deklarira oddaljeno aplikacijo kot odvisnost. Določi URL, kjer je mogoče najti manifest federacije modulov oddaljene aplikacije (majhna JSON datoteka, ki opisuje izpostavljene module).
3. Razreševanje med izvajanjem: Ko gostiteljska aplikacija potrebuje modul iz oddaljene aplikacije, dinamično pridobi manifest federacije modulov oddaljene aplikacije. Webpack nato razreši odvisnost modula in naloži potrebno kodo iz oddaljene aplikacije med izvajanjem.
4. Deljenje kode: Module Federation omogoča tudi deljenje kode med gostiteljsko in oddaljenimi aplikacijami. Če obe aplikaciji uporabljata isto različico deljene odvisnosti (npr. React, lodash), bo koda deljena, kar preprečuje podvajanje in zmanjšuje velikost svežnjev.

Nastavitev Module Federation: Praktičen primer

Prikažimo Module Federation s preprostim primerom, ki vključuje dva mikro-frontenda: "Katalog izdelkov" in "Nakupovalna košarica". Katalog izdelkov bo izpostavil komponento za seznam izdelkov, ki jo bo Nakupovalna košarica uporabila za prikaz povezanih izdelkov.

Struktura projekta

  
  micro-frontend-example/
    product-catalog/
      src/
        components/
          ProductList.jsx
        index.js
        webpack.config.js
    shopping-cart/
      src/
        components/
          RelatedProducts.jsx
        index.js
        webpack.config.js
  

Katalog izdelkov (oddaljena aplikacija)

webpack.config.js

  
  const { ModuleFederationPlugin } = require('webpack').container;
  const path = require('path');

  module.exports = {
    // ... other webpack configurations
    plugins: [
      new ModuleFederationPlugin({
        name: 'product_catalog',
        filename: 'remoteEntry.js',
        exposes: {
          './ProductList': './src/components/ProductList',
        },
        shared: {
          react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
          'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        },
      }),
    ],
  };
  

Pojasnilo:

• name: Edinstveno ime oddaljene aplikacije.
• filename: Ime vstopne datoteke, ki bo izpostavljena. Ta datoteka vsebuje manifest federacije modulov.
• exposes: Določa, kateri moduli bodo izpostavljeni s strani te aplikacije. V tem primeru izpostavljamo komponento `ProductList` iz `src/components/ProductList.jsx` pod imenom `./ProductList`.
• shared: Določa odvisnosti, ki naj bi se delile med gostiteljsko in oddaljenimi aplikacijami. To je ključnega pomena za preprečevanje podvojene kode in zagotavljanje združljivosti. `singleton: true` zagotavlja, da se naloži samo ena instanca deljene odvisnosti. `eager: true` naloži deljeno odvisnost takoj, kar lahko izboljša zmogljivost. `requiredVersion` določa sprejemljiv razpon različic za deljeno odvisnost.

src/components/ProductList.jsx

  
  import React from 'react';

  const ProductList = ({ products }) => (
    

      {products.map((product) => (
        
{product.name} - ${product.price}
      ))}
    
  );

  export default ProductList;
  

Nakupovalna košarica (gostitelj)

webpack.config.js

  
  const { ModuleFederationPlugin } = require('webpack').container;
  const path = require('path');

  module.exports = {
    // ... other webpack configurations
    plugins: [
      new ModuleFederationPlugin({
        name: 'shopping_cart',
        remotes: {
          product_catalog: 'product_catalog@http://localhost:3001/remoteEntry.js',
        },
        shared: {
          react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
          'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        },
      }),
    ],
  };
  

Pojasnilo:

• name: Edinstveno ime gostiteljske aplikacije.
• remotes: Določa oddaljene aplikacije, iz katerih bo ta aplikacija uporabljala module. V tem primeru deklariramo oddaljeno aplikacijo z imenom `product_catalog` in določimo URL, kjer je mogoče najti njeno datoteko `remoteEntry.js`. Format je `imeOddaljeneAplikacije: 'imeOddaljeneAplikacije@URLdoRemoteEntry'`.
• shared: Podobno kot oddaljena aplikacija tudi gostiteljska aplikacija določa svoje deljene odvisnosti. To zagotavlja, da gostiteljska in oddaljene aplikacije uporabljajo združljive različice deljenih knjižnic.

src/components/RelatedProducts.jsx

  
  import React, { useEffect, useState } from 'react';
  import ProductList from 'product_catalog/ProductList';

  const RelatedProducts = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
      // Fetch related products data (e.g., from an API)
      const fetchProducts = async () => {
        // Replace with your actual API endpoint
        const response = await fetch('https://fakestoreapi.com/products?limit=3');
        const data = await response.json();
        setProducts(data);
      };

      fetchProducts();
    }, []);

    return (
      

        
Related Products
        {products.length > 0 ?  : 
Loading...
}
      
    );
  };

  export default RelatedProducts;
  

Pojasnilo:

• import ProductList from 'product_catalog/ProductList'; Ta vrstica uvozi komponento `ProductList` iz oddaljene aplikacije `product_catalog`. Sintaksa `imeOddaljeneAplikacije/imeModula` pove Webpacku, naj pridobi modul iz določene oddaljene aplikacije.
• Komponenta nato uporabi uvoženo komponento `ProductList` za prikaz povezanih izdelkov.

Zagon primera

1. Zaženite aplikaciji Katalog izdelkov in Nakupovalna košarica z njunima razvojnima strežnikoma (npr. `npm start`). Prepričajte se, da tečeta na različnih vratih (npr. Katalog izdelkov na vratih 3001 in Nakupovalna košarica na vratih 3000).
2. V brskalniku odprite aplikacijo Nakupovalna košarica.
3. Morali bi videti razdelek Povezani izdelki, ki ga upodablja komponenta `ProductList` iz aplikacije Katalog izdelkov.

Napredni koncepti Module Federation

Poleg osnovne nastavitve Module Federation ponuja več naprednih funkcij, ki lahko izboljšajo vašo mikro-frontend arhitekturo:

Deljenje kode in različic

Kot je prikazano v primeru, Module Federation omogoča deljenje kode med gostiteljsko in oddaljenimi aplikacijami. To se doseže z možnostjo konfiguracije `shared` v Webpacku. Z določitvijo deljenih odvisnosti se lahko izognete podvojeni kodi in zmanjšate velikost svežnjev. Pravilno upravljanje različic deljenih odvisnosti je ključnega pomena za zagotavljanje združljivosti in preprečevanje konfliktov. Semantično različiciranje (SemVer) je široko uporabljen standard za različiciranje programske opreme, ki vam omogoča definiranje združljivih razponov različic (npr. `^17.0.0` dovoljuje katero koli različico, večjo ali enako 17.0.0, vendar manjšo od 18.0.0).

Dinamične oddaljene aplikacije

V prejšnjem primeru je bil URL oddaljene aplikacije trdo kodiran v datoteki `webpack.config.js`. Vendar pa boste v mnogih resničnih scenarijih morda morali dinamično določiti URL oddaljene aplikacije med izvajanjem. To lahko dosežete z uporabo konfiguracije oddaljene aplikacije, ki temelji na obljubi (promise):

  
  // webpack.config.js
  remotes: {
    product_catalog: new Promise(resolve => {
      // Fetch the remote URL from a configuration file or API
      fetch('/config.json')
        .then(response => response.json())
        .then(config => {
          const remoteUrl = config.productCatalogUrl;
          resolve(`product_catalog@${remoteUrl}/remoteEntry.js`);
        });
    }),
  },
  

To vam omogoča, da konfigurirate URL oddaljene aplikacije glede na okolje (npr. razvoj, testiranje, produkcija) ali druge dejavnike.

Asinhrono nalaganje modulov

Module Federation podpira asinhrono nalaganje modulov, kar vam omogoča nalaganje modulov po potrebi. To lahko izboljša začetni čas nalaganja vaše aplikacije z odložitvijo nalaganja nekritičnih modulov.

  
  // RelatedProducts.jsx
  import React, { Suspense, lazy } from 'react';

  const ProductList = lazy(() => import('product_catalog/ProductList'));

  const RelatedProducts = () => {
    return (
      

        
Related Products
        Loading...
}>
          
        
      
    );
  };
  

Z uporabo `React.lazy` in `Suspense` lahko asinhrono naložite komponento `ProductList` iz oddaljene aplikacije. Komponenta `Suspense` zagotavlja nadomestni uporabniški vmesnik (npr. indikator nalaganja), medtem ko se modul nalaga.

Federirani stili in sredstva

Module Federation se lahko uporablja tudi za deljenje stilov in sredstev (assets) med mikro-frontendi. To lahko pomaga ohranjati dosleden videz in občutek vaše aplikacije.

Za deljenje stilov lahko izpostavite CSS module ali styled-components iz oddaljene aplikacije. Za deljenje sredstev (npr. slike, pisave) lahko konfigurirate Webpack, da kopira sredstva na deljeno lokacijo in se nato nanje sklicujete iz gostiteljske aplikacije.

Najboljše prakse za Module Federation

Pri implementaciji Module Federation je pomembno upoštevati najboljše prakse, da zagotovite uspešno in vzdržljivo arhitekturo:

• Določite jasne meje: Jasno določite meje med mikro-frontendi, da se izognete tesni povezanosti in zagotovite neodvisno namestljivost.
• Vzpostavite komunikacijske protokole: Določite jasne komunikacijske protokole med mikro-frontendi. Razmislite o uporabi dogodkovnih vodil (event buses), deljenih knjižnic za upravljanje stanja ali API-jev po meri.
• Skrbno upravljajte deljene odvisnosti: Skrbno upravljajte deljene odvisnosti, da se izognete konfliktom različic in zagotovite združljivost. Uporabite semantično različiciranje in razmislite o uporabi orodja za upravljanje odvisnosti, kot sta npm ali yarn.
• Implementirajte robustno obravnavo napak: Implementirajte robustno obravnavo napak, da preprečite kaskadne napake in zagotovite stabilnost vaše aplikacije.
• Spremljajte zmogljivost: Spremljajte zmogljivost vaših mikro-frontendov, da prepoznate ozka grla in optimizirate delovanje.
• Avtomatizirajte namestitve: Avtomatizirajte postopek namestitve, da zagotovite dosledne in zanesljive namestitve.
• Uporabljajte dosleden slog kodiranja: Uveljavite dosleden slog kodiranja v vseh mikro-frontendih, da izboljšate berljivost in vzdržljivost. Pri tem lahko pomagajo orodja, kot sta ESLint in Prettier.
• Dokumentirajte svojo arhitekturo: Dokumentirajte svojo mikro-frontend arhitekturo, da zagotovite, da vsi člani ekipe razumejo sistem in kako deluje.

Module Federation v primerjavi z drugimi pristopi mikro-frontendov

Čeprav je Module Federation zmogljiva tehnika za implementacijo mikro-frontendov, ni edini pristop. Druge priljubljene metode vključujejo:

• Iframe-i: Iframe-i zagotavljajo močno izolacijo med mikro-frontendi, vendar jih je lahko težko brezšivno integrirati in lahko povzročijo preobremenitev zmogljivosti.
• Spletne komponente (Web Components): Spletne komponente vam omogočajo ustvarjanje ponovno uporabnih elementov uporabniškega vmesnika, ki jih je mogoče uporabiti v različnih mikro-frontendih. Vendar pa je njihova implementacija lahko bolj zapletena kot pri Module Federation.
• Integracija v času gradnje (Build-Time Integration): Ta pristop vključuje gradnjo vseh mikro-frontendov v eno samo aplikacijo v času gradnje. Čeprav lahko poenostavi namestitev, zmanjša avtonomijo ekip in poveča tveganje za konflikte.
• Single-SPA: Single-SPA je ogrodje, ki vam omogoča združevanje več enostranskih aplikacij (single-page applications) v eno samo aplikacijo. Zagotavlja bolj prilagodljiv pristop kot integracija v času gradnje, vendar je lahko nastavitev bolj zapletena.

Izbira pristopa je odvisna od specifičnih zahtev vaše aplikacije ter velikosti in strukture vaše ekipe. Module Federation ponuja dobro ravnovesje med prilagodljivostjo, zmogljivostjo in enostavnostjo uporabe, zaradi česar je priljubljena izbira za mnoge projekte.

Primeri uporabe Module Federation v praksi

Čeprav so specifične implementacije podjetij pogosto zaupne, se splošna načela Module Federation uporabljajo v različnih panogah in scenarijih. Tukaj je nekaj možnih primerov:

• Platforme za e-trgovino: Platforma za e-trgovino bi lahko uporabila Module Federation za ločevanje različnih delov spletnega mesta, kot so katalog izdelkov, nakupovalna košarica, postopek zaključka nakupa in upravljanje uporabniških računov, v ločene mikro-frontende. To omogoča različnim ekipam, da neodvisno delajo na teh odsekih in nameščajo posodobitve, ne da bi to vplivalo na preostali del platforme. Na primer, ekipa v *Nemčiji* bi se lahko osredotočila na katalog izdelkov, medtem ko ekipa v *Indiji* upravlja nakupovalno košarico.
• Aplikacije za finančne storitve: Aplikacija za finančne storitve bi lahko uporabila Module Federation za izolacijo občutljivih funkcij, kot so trgovalne platforme in upravljanje računov, v ločene mikro-frontende. To povečuje varnost in omogoča neodvisno revizijo teh kritičnih komponent. Predstavljajte si ekipo v *Londonu*, specializirano za funkcije trgovalne platforme, in drugo ekipo v *New Yorku*, ki skrbi za upravljanje računov.
• Sistemi za upravljanje vsebin (CMS): CMS bi lahko uporabil Module Federation, da bi razvijalcem omogočil ustvarjanje in nameščanje modulov po meri kot mikro-frontendov. To omogoča večjo prilagodljivost in prilagajanje za uporabnike CMS-a. Ekipa na *Japonskem* bi lahko zgradila specializiran modul za galerijo slik, medtem ko ekipa v *Braziliji* ustvarja napreden urejevalnik besedil.
• Aplikacije v zdravstvu: Aplikacija v zdravstvu bi lahko uporabila Module Federation za integracijo različnih sistemov, kot so elektronski zdravstveni zapisi (EHR), portali za paciente in sistemi za obračunavanje, kot ločene mikro-frontende. To izboljšuje interoperabilnost in omogoča lažjo integracijo novih sistemov. Na primer, ekipa v *Kanadi* bi lahko integrirala nov modul za telezdravje, medtem ko se ekipa v *Avstraliji* osredotoča na izboljšanje izkušnje portala za paciente.

Zaključek

Module Federation zagotavlja zmogljiv in prilagodljiv pristop k implementaciji mikro-frontendov. S tem, ko aplikacijam omogoča dinamično nalaganje kode druga od druge med izvajanjem, omogoča ustvarjanje resnično neodvisnih in sestavljivih frontend arhitektur. Čeprav zahteva skrbno načrtovanje in implementacijo, so prednosti povečane razširljivosti, hitrejših razvojnih ciklov in večje avtonomije ekip prepričljiva izbira za velike in zapletene spletne aplikacije. Ker se svet spletnega razvoja še naprej razvija, bo Module Federation igral vse pomembnejšo vlogo pri oblikovanju prihodnosti frontend arhitekture.

Z razumevanjem konceptov in najboljših praks, opisanih v tem članku, lahko izkoristite Module Federation za gradnjo razširljivih, vzdržljivih in inovativnih frontend aplikacij, ki ustrezajo zahtevam današnjega hitrega digitalnega sveta.